<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3新增属性选择器</title>
    <style>
        /* 1.必须是input，但是同时具有value这个属性 选择这个元素[]*/
        input[value] {
            color: pink;
        }

        /* 2.只选择type=text 文本框的input选取出来。 重点！！！必须掌握 */
        input[type=text] {
            color: pink;
        }

        /* 3.选择首先是div，然后具有class属性并且属性值必须是以icon开头的这些元素 */
        div[class^=icon] {
            color: pink;
        }

        section[class$=data] {
            color: red;
        }

        section[class*=icon3-ico] {
            color: skyblue;
        }

        /* 类选择器、属性选择器、伪类选择器的权重都是10 */
        div.icon1 {
            color: brown;
        }
    </style>
</head>

<body>
    <!-- 1.利用属性选择器就可以不用借助于类或id选择器 -->
    <input type="text" value="请输入用户名">
    <input type="text">
    <!-- 2.属性选择器还可以选择属性=值的某些元素 重点！！！必须掌握 -->
    <input type="text">
    <input type="password">
    <!-- 3.属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>我是打酱油的</div>
    <!-- 4.属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">我是安其拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">我是哪吒</section>
</body>

</html>